<script setup lang="ts">
  import { ref, onMounted, nextTick } from 'vue'
  // 行
  const row = 14
  const col = 10
  const size = row * col
  const box = ref<HTMLDivElement | null>(null)
  const boxList = ref<Array<any>>([])
  const w = ref('')
  const h = ref('')
  const createSmallBox = () => {
    const { width, height } = (box.value as HTMLDivElement).getBoundingClientRect()
    const wv = width / col
    const hv = height / row
    w.value = `${wv}px`
    h.value = `${hv}px`
    box.value = null
    const list = []
    for (let i = 0; i < size; i++) {
      const x = (i % col) * wv * -1
      const y = Math.floor(i / col) * hv * -1
      list.push({
        left: `${-x}px`,
        top: `${-y}px`,
        backgroundPosition: `${x}px ${y}px`,
        animationDelay: `${Math.floor(i / col) * 100}ms`
      })
    }
    boxList.value = list
  }
  onMounted(() => {
    nextTick(() => {
      createSmallBox()
    })
  })
</script>
<template>
  <div ref="box" class="box">
    <div
      v-for="(item, index) in boxList"
      :key="index"
      :style="{
        width: w,
        height: h,
        ...item
      }"
      class="small-box"
    ></div>
  </div>
</template>
<style scoped>
  .box {
    position: relative;
    width: 310px;
    height: 458px;
    font-size: 0;
    overflow: hidden;
    will-change: transform, opacity;
  }

  .small-box {
    position: absolute;
    background-image: url(@/assets/images/yunxiao.png);
    background-size: 310px 458px;
    opacity: 0;
    animation: smallBoxAnimate 2000ms linear forwards;
    will-change: transform, opacity;
  }
  @keyframes smallBoxAnimate {
    0% {
      opacity: 0;
    }
    40% {
      opacity: 0;
    }
    70% {
      opacity: 1;
    }
    100% {
      opacity: 1;
    }
  }
</style>
